<template>
  <div class="qckc">
    <el-button
      type="primary"
      @click="fanhui"
      style="margin-bottom: 20px; width: 100px; height: 40px"
      >返回</el-button
    >
    <header>
      <el-steps :active="2" align-center style="margin: 20px 0 0 0">
        <el-step
          title="已下单"
          description="这是一段很长很长很长的描述性文字"
        ></el-step>
        <el-step
          title="已付款"
          description="这是一段很长很长很长的描述性文字"
        ></el-step>
        <el-step
          title="待派送"
          description="这是一段很长很长很长的描述性文字"
        ></el-step>
        <el-step
          title="配送中"
          description="这是一段很长很长很长的描述性文字"
        ></el-step>
        <el-step title="已完成"></el-step>
      </el-steps>
      <h4 >订单进度详情</h4>
      <div class="header-cont">
        <div
          style="
            width: 92%;
            height: 400px;
            margin: 20px 0 20px 20px;
          "
        >
          <el-steps direction="vertical" :active="1">
            <el-step
              v-for="item in approvalSuccessData"
              :key="item.grade"
              :description="
                item.isApprove === 0
                  ? '等待审批'
                  : item.isApprove === 1
                  ? '审批中'
                  : item.isApprove === 2
                  ? '审批通过'
                  : item.isApprove === 3
                  ? '审批不通过'
                  : ''
              "
              :status="
                item.isApprove === 0
                  ? 'wait'
                  : item.isApprove === 1
                  ? 'process'
                  : item.isApprove === 2
                  ? 'finish'
                  : item.isApprove === 3
                  ? 'error'
                  : ''
              "
            >
              <template slot="title">
                <div class="title_wrap">
                  <span class="name">{{ item.userName }}</span>
                  <span class="date" style="margin-left: 200px">{{
                    item.approvalDate
                  }}</span>
                </div>
              </template>
            </el-step>
          </el-steps>
        </div>
      </div>
    </header>

    <div class="content">
        <h4 style="border-bottom: 1px solid #bbb;">订单信息</h4>
        <div class="con-cont">
            <div class="cont1">
                <p style="margin:0">买家信息</p>
                <div class="cont1-1">
                    <div class="cont1-1-1" >
                        <p style="width:40%">用户ID：138xxxxxxxx</p>
                        <p>账户姓名：XXXX</p>
                        <p>绑定手机号：135xxxxxxxx</p>
                    </div>
                    <p style="margin-left: 4.4%">微信号：XXXXXX</p>
                </div>
            </div>
            <div class="cont2">
                <p style="margin:0">送货地址</p>
                <div class="cont1-1">
                    <div class="cont1-1-1">
                        <p style="width:40%">送货地址：湖北省XXX市XXX区XXXXXXXXXXXX</p>
                        <p>联系人：XXX</p>
                        <p>联系电话：135xxxxxxxx</p>
                    </div>
                </div>
            </div>
            <div class="cont3">
                <p style="margin:0">服务网点信息</p>
                <div class="cont1-1">
                    <div class="cont1-1-1" >
                        <p style="width:40%">网点ID：000000</p>
                        <p>网点名称：XXXXX网点</p>
                        <p>所属分公司：XXXXX分公司</p>
                    </div>
                    <p style="margin-left: 4%">网点地址：湖北省XXX市XXX区XXXXXXXXXXXX</p>
                </div>
            </div>
            <div class="cont4">
                <p style="margin:0">订单信息</p>
                <div class="cont1-1">
                    <div class="cont1-1-1" >
                        <p style="width:40%;margin-left: 3.8%">订单号：12345678999</p>
                        <p>下单时间：2020-10-XX XX：XX：XX</p>
                        <p>付款时间：2020-10-XX XX：XX：XX</p>
                    </div>
                    <p style="margin-left: 4.6%">完成时间：2020-10-XX XX：XX：XX</p>
                </div>
            </div>
        </div>

        <el-table
            :data="tableData"
            style="width: 100%;"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column label="商品名称" width="360" >
              <template slot-scope="scope">
                <p style="margin:0">{{scope.row.item && scope.row.item.bianhao }}</p>
                <div style="display:flex;">
                  <img style="width:80px;height:60px" :src="scope.row.item && scope.row.item.img" alt="">
                  <p style="line-height:80px;margin:0">{{scope.row.item && scope.row.item.shop }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="danjia" label="商品类型" >
            </el-table-column>
            <el-table-column prop="date" label="商品数量"  >
            </el-table-column>
            <el-table-column prop="address" label="价格" >
            </el-table-column>
          </el-table>
        <div class="youhui">
          <div class="youhui2">
            <p>商品总价：<span>220.00 /元</span></p>
            <p>配送费：<span>0 /元</span></p>
            <p>优惠券: <span>0 /元</span></p>
            <p>抵扣券: <span>0 /元</span></p>
            <p>积分抵扣: <span>0 /元</span></p>
            <h4>实付款:<span>220 /元</span></h4>
          </div>
        </div>
    </div>

    <footer>
      <h4 style="border-bottom: 1px solid #bbb;height:60px;line-height:60px">订单信息</h4>
      <div class="foot">
        <p>交纳押金：80.00 /元</p>
        <p>押桶：4 /桶</p>
        <el-button type="primary" style="width:120px;height:40px">查看凭证</el-button>
      </div>
    </footer>

  </div>
</template>

<script>
export default {
  data() {
    return {
      approvalSuccessData: [
        {
          requestId: "c16374401369f1b5a05f094d651cce74",
          userId: "ff25f286dd5d0b10ba18e779b2977f94",
          userName: "已完成",
          isApprove: 2,
          approvalDate: "2020-10-05 23:00:00",
          grade: 1,
        },
        {
          requestId: "c16374401369f1b5a05f094d651cce74",
          userId: "9e22f6feba9411e99092fa163e6c79ee",
          userName: "配送中",
          isApprove: 0,
          grade: 2,
          approvalDate: "2020-10-05 23:00:00",
        },
        {
          requestId: "c16374401369f1b5a05f094d651cce74",
          userId: "9e22f6feba9411e99092fa163e6c79ee",
          userName: "待派送",
          isApprove: 0,
          grade: 3,
          approvalDate: "2020-10-05 23:00:00",
        },
        {
          requestId: "c16374401369f1b5a05f094d651cce74",
          userId: "9e22f6feba9411e99092fa163e6c79ee",
          userName: "已付款",
          isApprove: 0,
          grade: 4,
          approvalDate: "2020-10-05 23:00:00",
        },
        {
          requestId: "c16374401369f1b5a05f094d651cce74",
          userId: "9e22f6feba9411e99092fa163e6c79ee",
          userName: "已下单",
          isApprove: 0,
          grade: 5,
          approvalDate: "2020-10-05 23:00:00",
        },
      ], // 审批进度数据
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      tableData: [
        {
          date: "02",
          name: "2020-09-26 18:30:01",
          address: "10",
          danjia: 239,
          item:{
            bianhao:'商品编号：1232312312222222222',
            img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            shop:'XXXXXXXxxxxxxx商品…'
          }
        },
        {
          date: "04",
          name: "2020-09-26 18:30:02",
          address: "20",
          danjia: 238,
          item:{
            bianhao:'商品编号：1232312312222222222',
            img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            shop:'XXXXXXXxxxxxxx商品…'
          }
        },
      ],
    };
  },
  methods: {
    fanhui() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.qckc {
  width: 98%;
  overflow: hidden;
  margin: 1%;

  header {

    height: 500px;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0 4%;
    overflow: hidden;
    .header-cont {
      width: 100%;
      height: 300px;
      border: 1px solid #bbb;
      overflow-y: auto;
    }
  }
  .content{
    //  height: 1100px;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0 4%;
    overflow: hidden;
    .con-cont{
        margin-bottom: 30px;
        overflow: hidden;
        .cont1,.cont2,.cont3,.cont4{
            height: 100px;
            .cont1-1{
                .cont1-1-1{
                    width: 80%;
                    height: 30px;
                    line-height: 30px;
                    display: flex;
                    justify-content: space-around;
                }
            }
        }
    }
    .youhui{
      width: 100%;
      overflow: hidden;
      margin-top: 30px;
      .youhui2{
        float: right;
        margin-right: 20%;
      }
    }
  }
  footer{
    height: 160px;
    background-color: #fff;
    margin-bottom: 20px;
    padding: 0 4%;
    .foot{
      display: flex;
      justify-content: space-around;
      height: 100px;
    }
  }
}
</style>